<template>
	<view class="register-detail">
		<view class="register-detail-header center">
			<view class="register-detail-title flexR">
				<view class="icon"><u-icon name="checkmark"></u-icon></view>
				{{params.payStatus|transStatus}}
			</view>
			<view class="font12">
				{{params.paStatus|transStatusName}}
			</view>
		</view>
		<view class="div-cut" v-if="params.payStatus!=='0'&&params.payStatus!='2'"></view>
		<view class="register-detail-code" v-if="params.payStatus!=='0'&&params.pay_status!='2'">
			<u-section title="就诊条码" :right="false" :bold='false' :line-color='themeColorLight'
				color="#000000"></u-section>
			<view class="register-detail-component-code">
				<tki-barcode ref="barcode" onval :val="params.patId" :load-make="true" :opations="barOpations" />
				<view class="register-detail-component-text">
					{{params.patId}}
				</view>
			</view>
		</view>
		<view class="div-cut"></view>
		<view class="register-detail-see-doctor">
			<u-section title="就诊信息" :right="false" :bold='false' :line-color='themeColorLight'
				color="#000000"></u-section>
			<view class="card">
				<view class="main flexC">
					<view class="row"> <text>就&nbsp;&nbsp;诊&nbsp;人：</text>{{params.patName||userInfo.name}} </view>
					<!-- <view class="row"> <text>就诊序号：</text>{{params.yyhx}} </view> -->
					<view class="row"> <text>科&emsp;&emsp;室：</text>{{params.departmentName}} </view>
					<view class="row"> <text>专&emsp;&emsp;家：</text>{{params.doctorName}} </view>
					<view class="row"> <text>就诊日期：</text>{{params.visitTime}} </view>
					<!-- <view class="row" v-if="params.jzdz"> <text>就诊地址：</text>{{params.jzdz}} </view> -->
				</view>
			</view>
		</view>
		<view class="div-cut" v-if="params.payMoney"></view>
		<view class="register-detail-pay" v-if="params.payMoney">
			<u-section title="缴费信息" :right="false" :bold='false' :line-color='themeColorLight'
				color="#000000"></u-section>
			<view class="card">
				<view class="main flexC">
					<view class="row"> <text>交易金额：</text>{{params.payMoney}} </view>
					<view class="row"> <text>医院名称：</text>{{params.campusName}} </view>
					<view class="row"> <text>医院单号：</text>{{params.receiptNo}} </view>
					<view class="row"> <text>流&nbsp;&nbsp;水&nbsp;号：</text>{{params.paySerialNo}} </view>
					<view class="row"> <text>支付状态：</text>{{transName(params.payStatus)}} </view>
				</view>
			</view>
		</view>
		<view class="div-cut"></view>
		<view class="register-detail-btn">
			<view class="register-detail-pay-btn" v-if="params.payStatus==1">
				<view class="theme-light-btn" @click="toPage">去支付</view>
			</view>
			<view class="wriht-btn" v-if="params.payStatus==1">
				<view class="theme-fff-btn" @click="handleCancel(1)">取消预约</view>
			</view>
			<view class="wriht-btn" v-if="params.payStatus==3">
				<view class="theme-fff-btn" @click="handleCancel(1)">取消挂号</view>
			</view>
		</view>
		<u-modal v-model="showConfirm" @confirm="confirm" :async-close="true" :content='content' show-cancel-button
			:confirm-color='themeColor'></u-modal>
		<Load :load="load" />
	</view>
</template>

<script>
	import tkiBarcode from '@/components/BarCode/tki-barcode.vue'
	import {
		themeColorLight,
		themeColor
	} from '@/static/js/theme.js'
	import {
		mapGetters
	} from 'vuex'
	import {
		cancelAppointment,
		cancelRegister
	} from '@/api/register.js'
	import Load from '@/components/Load/index.vue'
	export default {
		components: {
			tkiBarcode,
			Load
		},
		data() {
			return {
				themeColor,
				themeColorLight,
				params: '', //上级带的参数
				load: false,
				showConfirm: false,
				content: '您确定继续操作？',
				type: '',
				barOpations: {
					displayValue: false
				}
			}
		},
		computed: {
			...mapGetters(['userInfo', 'hospitalInfo']),
			barCode() {
				if (this.userInfo.medicalRecordNumber) {
					return this.userInfo.medicalRecordNumber
				} else {
					return this.userInfo.hisPatientId
				}
			}
		},
		onLoad(op) {
			if (op.item) {
				this.params = JSON.parse(op.item)
			}
			console.log(this.params)
		},
		filters: {
			transStatus(val) {
				if (val == '0' || val == 1) {
					return '已预约成功'
				} else if (val == 4) {
					return '已取消支付'
				} else if (val == 5) {
					return '已退号成功'
				} else if (val == 3) {
					return '预约挂号成功'
				} else if (val == 6) {
					return '已就诊结束'
				} else {
					return ''
				}
			},
			transStatusName(val) {
				if (val == '0' || val == 1) {
					return '已预约成功，请您尽快完成支付锁定号源，避免号源丢失。'
				} else if (val == 4) {
					return '已取消支付，如需重新挂号，请在首页选择医生或科室挂号重新进行预约挂号。'
				} else if (val == 5) {
					return '已成功退号，如需重新挂号，请在首页选择医生或科室挂号重新进行预约挂号。'
				} else if (val == 3) {
					return '预约挂号成功，您可直接凭缴费成功的页面在挂号医生处就诊。如需发票，请到缴费窗口进行补打，请提前到医院就诊，过号需重排。'
				} else if (val == 6) {
					return '已完成就诊，祝您健康。'
				} else {
					return ''
				}
			}
		},
		methods: {
			transName(val) {
				if (this.params) {
					// if (this.params.payStatus === '0') {
					// 	if (val == 1) {
					// 		return '已支付'
					// 	} else {
					// 		return '未支付'
					// 	}
					// } else {
						switch (this.params.payStatus) {
							case 3:
								return '已支付';
							case 5:
								return '已退款';
							case 4:
								return '已取消';
							case 1:
								return '已挂号';
							default:
								return ''
						}
					}
				// } else {
					// return ''
				// }
			},
			toPage() {
				let res = {
					ksmc: this.params.departmentName, // 科室名称
					ksdm: this.params.departmentCode, // 科室代码
					ysmc: this.params.doctorName, // 医生
					ysdm: this.params.doctorCode,
					ghrq: this.params.orderTime, // 挂号日期
					pbmxid: this.params.schedule_id, // 排班明细序号
					ghf: this.params.total_amount,
					ghje: this.params.total_amount,
					hyid: this.params.hyid, // 号源ID
					ghsjd: this.params.visit_time,
					// yyxh:this.params.yyxh,
					// yyhx:this.params.yyhx,
					patId: this.userInfo.patId,
					// zlf:this.params.zlf
					hisOrderId: this.params.his_order_id
				}
				uni.redirectTo({
					// url:'/pages/Pay/registerPay?yyzt=1&params=' + JSON.stringify(res)
					url: './cashier?params=' + JSON.stringify(res)
				})
			},
			handleCancel(type) {
				this.type = type
				if (type === 1) { //取消预约
					this.content = '取消预约该号源将不在锁定，确定取消预约？'
				} else {
					this.content = '退号您将会失去该号源，确定取消挂号？'
				}
				this.showConfirm = true
			},
			confirm() {
				if (this.type === 1) {
					this.cancleApp(flag => {
						this.showConfirm = false
						if (flag) {
							let pages = getCurrentPages(); // 当前页面
							let beforePage = pages[pages.length - 2]; // 前一个页面
							beforePage.$vm.initData(); // 执行前一个页面的刷新
							uni.navigateBack({
								delta: 1 //1表示返回上一页
							});
						}
					})
				} else {
					this.cancleRe(flag => {
						this.showConfirm = false
						if (flag) {
							let pages = getCurrentPages(); // 当前页面
							let beforePage = pages[pages.length - 2]; // 前一个页面
							beforePage.$vm.initData(); // 执行前一个页面的刷新
							uni.navigateBack({
								delta: 1 //1表示返回上一页
							});
						}
					})
				}
			},
			cancleApp(cal) {
				this.load = true
				let params = {
					// ghrq:this.params.ghrq,
					cardNo: this.userInfo.cardNo,
					// yyxh:this.params.yyxh
					dealCode: this.params.his_order_id
				}
				cancelAppointment(params).then(data => {
					this.load = false
					this.$u.toast('取消预约成功')
					cal(true)
				}).catch(e => {
					this.load = false
					cal(false)
				})
			},
			cancleRe(cal) {
				this.load = true
				let params = {
					// ghxh:this.params.ghxh,
					// payMoney:this.params.total_amount,
					// paylsh:this.params.paylsh,
					// sjh:this.params.jssjh,
					cardNo: this.userInfo.cardNo,
					dealCode: this.params.his_order_id
				}
				cancelRegister(params).then(data => {
					this.load = false
					this.$u.toast('取消挂号成功')
					cal(true)
				}).catch(e => {
					this.load = false
					cal(false)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.register-detail {
		min-height: calc(100vh);
		background-color: #FFF;

		.register-detail-header {
			background-color: $theme-color;
			background-image: url(../../../static/images/bg-header/register_detail_header.png);
			background-size: cover;
			height: 252rpx;
			color: #FFFFFF;
			padding: 0 30rpx;

			.register-detail-title {
				padding-top: 24rpx;
				font-size: 34rpx;
				justify-content: center;
				align-items: center;

				.icon {
					border: 2px solid $text-color-fff;
					border-radius: 50%;
					line-height: 60rpx;
					height: 60rpx;
					width: 60rpx;
					text-align: center;
					margin-right: 16rpx;
				}

				margin-bottom: 20rpx;
			}

			>.font12 {
				line-height: 30rpx;
			}
		}

		.register-detail-code {
			background-color: $uni-bg-color;
			padding: 20rpx 30rpx;

			.register-detail-component-code {
				padding: 30rpx 0;
			}

			.register-detail-component-text {
				text-align: center;
				margin-top: 20rpx;
				font-size: 28rpx;
				font-weight: 700;
			}
		}

		.register-detail-see-doctor,
		.register-detail-pay {
			background-color: $uni-bg-color;
			padding: 20rpx 30rpx;

			.card .main {
				padding-left: 0;
				padding-right: 0;
				align-items: flex-start;

				>.row {
					>text {
						width: 160rpx;
					}
				}
			}
		}

		.register-detail-btn {
			padding: 40rpx 30rpx 70rpx 30rpx;
			background-color: $uni-bg-color;

			.register-detail-pay-btn {
				margin-bottom: 20rpx;
				height: 90rpx;
			}

			.wriht-btn {
				height: 90rpx;
			}
		}
	}
</style>
<style lang="scss">
	.register-detail-component-code {
		.tki-barcode {
			image {
				width: 100%;
				height: 60px !important;
			}
		}
	}
</style>